<template>
  <div>
    <vueForm
      :formData="form_data"
      :formItem="formItem"
      :formHandler="formHandler"
      :labelWidth="labelWidth"
      ref="vueForm"
    >
      <template v-slot:city>
        <cityArea
          ref="cityArea"
          :cityAreaValue.sync="form_data.area"
          @callback="callbackComponent"
        ></cityArea>
      </template>
      <template v-slot:amap>
        <div class="aMap">
          <aMap
            @callback="callbackAmapComponent"
            ref="aMap"
            :options="options"
          ></aMap>
        </div>
      </template>
    </vueForm>
  </div>
</template>
<script>
import { parkingAdd, parkingDetailed, parkingEdit } from "@/request/parking";
import vueForm from "@/components/form/index";
import aMap from "@/views/aMap/aMap";
import cityArea from "@/components/common/cityArea/cityArea";
import { messageFun } from "@/utils/element";
export default {
  data() {
    // const parkingName = (rule, value, callback) => {
    //   if (value === "") {
    //     callback(new Error("停车名称不能为空"));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      labelWidth: "120px",
      formItem: [
        {
          type: "Input",
          label: "停车场名称",
          placeholder: "请输入停车场名称",
          prop: "parkingName",
          required: true,
          rules: [
            {
              min: 3,
              max: 5,
              message: "长度在 3 到 5 个字符",
              trigger: "blur",
            },
          ],
          // validator: [
          //   { required: true, validator: parkingName, trigger: "blur" },
          // ],
        },
        {
          type: "Slot",
          slotName: "city",
          prop: "area",
          label: "区域",
          value: [],
        },
        {
          type: "Input",
          label: "详细地址",
          placeholder: "请输入详细地址",
          prop: "address",
          required: true,
        },
        {
          type: "Radio",
          label: "类型",
          prop: "type",
          required: true,
          options: this.$store.state.config.parking_type,
        },
        {
          type: "Input",
          label: "可停放车辆",
          placeholder: "请输入可停放车辆",
          prop: "carsNumber",
          required: true,
        },
        {
          type: "Radio",
          label: "禁启用",
          prop: "status",
          required: true,
          options: this.$store.state.config.parking_status,
        },
        {
          type: "Slot",
          slotName: "amap",
          prop: "area",
          label: "位置",
        },
        {
          type: "Input",
          label: "经纬度",
          placeholder: "经纬度",
          prop: "lnglat",
          disabled: true,
        },
      ],
      formHandler: [
        {
          type: "primary",
          label: "确认",
          key: "1",
          handler: () => this.onSubmit(),
        },
        {
          type: "primary",
          label: "重置",
          key: "2",
          handler: () => this.reset(),
        },
      ],
      form_data: {
        parkingName: "",
        area: "",
        address: "",
        type: "",
        carsNumber: "",
        status: "",
        lnglat: "",
      },
      ruleForm: {
        parkingName: [
          {
            required: true,
            message: "请输入停车场名称",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: "blur",
          },
        ],
        carsNumber: [
          {
            required: true,
            message: "请输入可停放的车辆",
            trigger: "blur",
          },
          { type: "number", message: "输入的不是数字类型" },
        ],
      },
      id: this.$route.query.id,
      options: {
        mapload: true,
      },
    };
  },
  components: {
    vueForm,
    aMap,
    cityArea,
  },
  methods: {
    onSubmit() {
      this.$refs.vueForm.$refs.form.validate((status) => {
        console.log(this.form_data);
        if (status && this.id) {
          this.parkingEdit();
        } else {
          this.parkingAdd();
        }
      });
    },
    reset() {
      console.log("reset");
    },
    async parkingDetailed() {
      const { data } = await parkingDetailed(this.id);
      if (data && data.resCode === 0) {
        const detailData = data.data;
        const formData = this.form_data;
        for (const key in detailData) {
          if (Object.keys(formData).includes(key)) {
            this.form_data[key] = detailData[key];
          }
        }
        const splitLnglat = detailData.lnglat.split(",");
        const lnglat = {
          lng: splitLnglat[0],
          lat: splitLnglat[1],
        };
        this.$refs.aMap.setMarker(lnglat);
        this.$refs.cityArea.initDefault(detailData.region);
      } else {
        messageFun(data.message);
      }
    },

    async parkingAdd() {
      const { data } = await parkingAdd(this.form_data);
      if (data && data.resCode === 0) {
        messageFun(data.message, "success");
        this.resetForm("form");
        this.$router.push("/parkingList");
      } else {
        messageFun(data.message);
      }
    },
    async parkingEdit() {
      const requestData = this.form_data;
      requestData.id = this.id;
      const { data } = await parkingEdit(requestData);
      if (data && data.resCode === 0) {
        console.log(data);
        messageFun(data.message, "success");
        this.resetForm("form");
        this.$router.push("/parkingList");
      } else {
        messageFun(data.message);
      }
    },
    mapLoad() {
      if (this.id) {
        this.parkingDetailed();
      }
    },
    resetForm(formName) {
      this.$refs.vueForm.$refs[formName].resetFields();
    },
    callbackComponent(params) {
      if (params.function) {
        this[params.function](params.data);
      }
    },
    callbackAmapComponent(params) {
      if (params.function) {
        this[params.function](params.data);
      }
    },
    setMapCenter(data) {
      this.$refs.aMap.setMapCenter(data);
    },
    getLngLat(e) {
      this.form_data.lnglat = e.value;
    },
  },
};
</script>
<style lang="scss" scoped>
.aMap {
  width: 100%;
  height: 350px;
}
</style>
